<template>
  <div class="container">
    <div class="login-container row aic">
      <div class="h100 login-box row">
        <div class="login-left col-1">
          <div class="desc-box">
            <div class="logo-name row aic">
              <div class="img">
                <img alt="logo" src="@/assets/logo.svg" />
              </div>
              <h1 class="ml-1 sys-name">
                {{ webConfig.SystemName }}
              </h1>
            </div>

            <h2 class="title mt-2">农药二维码溯源后台管理平台</h2>
            <h2 class="desc mt-2 row aic">
              <el-icon>
                <CaretRight />
              </el-icon>
              科技赋能保丰产
              <el-icon>
                <CaretLeft />
              </el-icon>
            </h2>
          </div>
        </div>
        <div class="login-right col-1">
          <router-view></router-view>
        </div>
      </div>
    </div>
    <div class="footer">
      CopyRight 2021 All Right Reserved {{ webConfig.SystemName }}
      <a href="//beian.miit.gov.cn/" target="_blank">{{ webConfig.beian }}</a>
    </div>
  </div>
</template>
<script setup lang="ts">
import { CaretRight, CaretLeft } from '@element-plus/icons-vue';

const webConfig = {
  SystemName: '湖南省农药协会',
  backgroundImage: '',
  beian: '',
  logo: '',
  loginlogourl: '',
  ico: '',
};
</script>

<style lang="scss" scoped>
@media screen and (max-width: 768px) {
  .login-left {
    display: none;
  }

  .login-right {
    padding: 3rem;
  }
}
a:hover,
a:active {
  text-decoration: none;
  padding-bottom: 0;
  border-bottom: none;
}
.container {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;

  &::before,
  &::after {
    content: '';
    position: fixed;
    bottom: 0;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
  }

  &::before {
    width: 197px;
    height: 234px;
    background-image: url(@/assets/images/bg-left.png);
    left: 0;
  }

  &::after {
    width: 300px;
    height: 250px;
    background-image: url(@/assets/images/bg-right.png);
    right: 0;
  }

  .login-container {
    height: 100%;
    padding-top: 3%;
    padding-bottom: 5%;
    box-sizing: border-box;
    margin: auto;
    position: relative;

    // box-shadow: 10px 10px 5px #888888;
    // width: 64%;
    // height: 0;
    .login-box {
      width: 100%;
      box-shadow: 0px 20px 80px 0px rgba(0, 0, 0, 0.3);
    }

    .login-left {
      background-image: linear-gradient(
        0deg,
        rgb(58, 72, 90) 0%,
        rgb(96, 112, 137) 100%
      );
      height: 100%;
      // background: linear-gradient(0deg, #3a485a 0%, #607089 10%);
      color: white;
      border-radius: 5px 0 0 5px;
      padding: 4rem;
      box-sizing: border-box;
      position: relative;

      &::after,
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
      }

      &::before {
        background: url(@/assets/images/loginbefor.png) no-repeat;
      }

      &::after {
        background-color: rgba(0, 0, 0, 0);
        background: url(@/assets/images/loginbak.png) no-repeat right bottom;
      }

      .desc-box {
        .logo-name {
          // transform: translate(50%);
          .img {
            width: 38px;
            height: 38px;
            padding: 4px;
            display: flex;
            justify-content: center;
            align-items: center;
            // background: linear-gradient(0deg, #3a485a 0%, #607089 10%);
            background-color: rgba(255, 255, 255, 0.8);
            box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.3);

            border-radius: 50%;

            img {
              width: 100%;
              height: auto;
            }
          }

          .sys-name {
            letter-spacing: 5px;
            font-size: 1.6rem;
          }
        }

        .title {
          font-weight: normal;
          letter-spacing: 5px;
          font-size: 1.4rem;
        }

        .desc {
          font-weight: normal;
          font-size: 1.4rem;
          padding-bottom: 5rem;
        }
      }
    }

    .login-right {
      background-color: rgba(255, 255, 255, 0.6);
      // padding: 4rem;
    }

    .forget-password {
      display: flex;
      justify-content: space-between;
      text-align: center;
      a:hover,
      a:active {
        text-decoration: none;
        padding-bottom: 0;
        border-bottom: none;
      }
    }

    .other-login {
      .other-login-befor,
      .other-login-after {
        display: inline-block;

        flex: 1;
        margin-bottom: 0.5rem;

        border-bottom: 1px solid gray;
      }

      .other-login-text {
        flex: 2;
      }
    }
  }
}
</style>
